<template>
	<view class="cart">
		<!-- 收货地址 -->
		<harvest-address></harvest-address>


		<!-- 标题 -->
		<view class="cart-title">
			<uni-icons type="shop" size="24"></uni-icons>
			<text>购物车</text>
		</view>


		<!-- 主体 -->
		<view class="goods-list">
			<uni-swipe-action>
				<block v-for="goodsItem in cart" :key="goodsItem.goods_id">
					<uni-swipe-action-item :right-options="options" @click="onDeleteGoodsItem(goodsItem)">
						<goods-item :item="goodsItem" :show-radio="true" @radioChange="radioChangeHandler" showNumberBox
							@number-change="numberChangeHandler"></goods-item>
					</uni-swipe-action-item>
				</block>
			</uni-swipe-action>
		</view>


		<!-- 购物车为空 -->
		<view class="on-cart-empty" v-if="!cart.length">
			<image src="../../static/images/cart-empty.png" class="empty-image"></image>
			<text class="empty-text">购物车空空如也~</text>
		</view>


		<!-- 结算区域 -->
		<balance></balance>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	import BadgeMixin from '../../mixins/badge-mixin.js'

	import GoodsItem from '../../components/GoodsItem/GoodsItem.vue'
	import HarvestAddress from '../../components/HarvestAddress/HarvestAddress.vue'
	import Balance from '../../components/Balance/Balance.vue'
	export default {
		mixins: [BadgeMixin],
		components: {
			GoodsItem,
			HarvestAddress,
			Balance
		},
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#E4393C'
					}
				}]
			}
		},
		methods: {
			...mapMutations('cart', ['updateGoodsState', 'updateGoodsCount','removeGoodsItem']),
			radioChangeHandler(payload) {
				this.updateGoodsState(payload)
			},
			numberChangeHandler(goods) {
				this.updateGoodsCount(goods)
			},
			onDeleteGoodsItem(goods) {
				const goodsId = goods.goods_id
				this.removeGoodsItem(goodsId)
			}
		},
		computed: {
			...mapState('cart', ['cart'])
		}
	}
</script>

<style lang="scss">
	.cart {
		padding-bottom: 96rpx;
		.cart-title {
			display: flex;
			height: 96rpx;
			padding-left: 16rpx;
			align-items: center;
			text-align: center;
			font-size: 28rpx;
			border-bottom: 2px solid #f0f2f5;

			text {
				margin-left: 12rpx;
			}
		}

		.on-cart-empty {
			display: flex;
			flex-direction: column;
			padding-top: 360rpx;
			text-align: center;
						align-items: center;
			

			.empty-image {
				width: 108rpx;
				height: 108rpx;
			}
			.empty-text {
				font-size: 24rpx;
			}
		}
	}
</style>
